<script setup lang="ts">
import { ref } from 'vue'
import { Search, Refresh, Check } from '@element-plus/icons'
import { customApiExecute } from '../../utils/common-methods'
import anvilPagination from '../anvilPagination/anvilPagination.vue'

// 查询仓库对应接口的apiid
const STORE_APIID = '1000047'

const props = defineProps({
  selectType: {
    type: String,
    default: ''
  },
  apiParams: {
    type: Array,
    default: () => []
  }
})

const modelValue = defineModel<String | Array<String>>()

const visible = ref<boolean>(false)

const storeSelection = ref([])

const queryParams = ref({
  storeNameLike: '',
  storeCodeLike: ''
})

const pageObj = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const tableData = ref([])

const getStoreListByPage = () => {
  let param = {
    ...queryParams.value
  }
  props.apiParams.map((p: any) => {
    const { key, value } = p
    param[key] = value
  })

  const callback = (res: any) => {
    tableData.value = res.data.list
    pageObj.value.total = res.data.total
  }

  const config = {
    url: STORE_APIID,
    params: param,
    callback
  }

  return customApiExecute(config)
}

const handleInputSearch = () => {
  visible.value = true
}

const handleInputRefresh = () => {
  if (props.selectType == 'multiple') {
    modelValue.value = []
  } else {
    modelValue.value = ''
  }
}

const handleTableRefresh = () => {
  queryParams.value = {
    storeNameLike: '',
    storeCodeLike: ''
  }
  getStoreListByPage()
}

const handleAdd = (row: any) => {
  if (props.selectType == 'multiple') {
    ;(modelValue.value as Array<String>).push(row.storeCode)
  } else {
    modelValue.value = row.storeCode
  }

  visible.value = false
}

const handleStoreSelectionChange = (selection: any) => {
  storeSelection.value = selection.map((item) => item.storeCode)
}

const submitSelection = () => {
  modelValue.value = storeSelection.value
  visible.value = false
}
getStoreListByPage()
</script>

<template>
  <div>
    <!-- <el-input :disabled="true" v-model="modelValue" /> -->
    <div class="store-select">
      <el-select v-model="modelValue" :multiple="selectType == 'multiple'" :disabled="true">
        <el-option
          v-for="opt in tableData"
          :key="opt.storeCode"
          :label="opt.storeName"
          :value="opt.storeCode"
        />
      </el-select>
      <el-icon class="store-icon" @click="handleInputSearch"><Search /></el-icon>
      <el-icon class="store-icon" @click="handleInputRefresh"><Refresh /></el-icon>
    </div>

    <drag-dialog
      title="仓库选择"
      v-if="visible"
      v-model="visible"
      width="90%"
      class="anvil-code-dialog"
    >
      <el-form label-suffix=":">
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="仓库编码">
              <el-input v-model="queryParams.storeCodeLike" />
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="仓库名称">
              <el-input v-model="queryParams.storeNameLike" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <div>
              <el-button
                class="anvil-code-custom-button"
                :icon="Refresh"
                @click="handleTableRefresh"
              >重置</el-button
              >
              <el-button
                class="anvil-code-custom-button"
                :icon="Search"
                type="success"
                @click="getStoreListByPage"
              >查询</el-button
              >
              <el-button
                v-if="selectType == 'multiple'"
                class="anvil-code-custom-button"
                :icon="Check"
                type="danger"
                @click="submitSelection"
              >提交</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        class="anvil-code-table"
        :data="tableData"
        @selection-change="handleStoreSelectionChange"
      >
        <el-table-column v-if="selectType == 'multiple'" type="selection" width="50" />
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="handleAdd(scope.row)">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="storeCode" label="仓库编码" min-width="180" align="center" />
        <el-table-column prop="storeName" label="仓库名称" min-width="180" align="center" />
        <el-table-column prop="storeTypeName" label="仓库类型" width="180" align="center" />
      </el-table>

      <anvil-pagination
        v-show="pageObj.total > 0"
        :total="pageObj.total"
        v-model:page="pageObj.pageNum"
        v-model:limit="pageObj.pageSize"
        @pagination="getStoreListByPage"
      />
    </drag-dialog>
  </div>
</template>

<style lang="scss" scoped>
.store-select {
  display: flex;
  align-items: center;
  gap: 8px;

  .store-icon {
    color: #409efc;
    cursor: pointer;
    font-size: 20px;
  }
}
</style>
